<template>
  <a-form :model="form" label-align="left" layout="vertical" :ref="(el: refType) => setRefMap(el)">
    <div v-for="item in formOptions" class="content-item">
      <div class="content-title">{{ item.name }}</div>
      <component
        :is="getComponents(item)"
        v-bind="{ ...item, ...$attrs }"
        v-on="$attrs"
      />
      <component
        :is="FormItem"
        v-bind="{ ...item, ...$attrs, item, form, disabled }"
        @update:handle-change="handleChange"
      />
    </div>
  </a-form>
</template>
<script lang="ts" setup name="FormComponent">
import FitDoctor from './fitDoctor.vue';
import AtypismDoctor from './atypismDoctor.vue';
import AllAtypismDoctor from './allAtypismDoctor.vue';
import FormItem from './formItem.vue';
import type { Component, ComponentPublicInstance } from 'vue';
import type { FormItem as Item } from '@/store/modules/processHeader/type';
type refType = Element | ComponentPublicInstance | null;
const props = defineProps({
  form: {
    type: Object,
    default: {} as {[x: string | number]: any}
  },
  formOptions: {
    type: Array<Item>
  },
  disabled: {
    type: Boolean,
    default: false
  },
  formRef: {
    type: Object,
    default: {}
  }
});
const emit = defineEmits(["update:handleChange"]);
const getComponents = (item: Item) => {
  const CompEnum: {[x: number]: Component | string} = {
    1: FitDoctor,
    2: AtypismDoctor,
    3: AllAtypismDoctor,
    4: ''
  };
  return CompEnum[item.lesionType ?? 4];
};
const handleChange = ($event: any) => {
  emit("update:handleChange", $event);
};
const setRefMap = (el: refType) => {
  if (el) {
    props.formRef[`${props.formRef.seriesSetClass}`] = el;
  }
}
</script>
<style lang="less" scoped>
.content-item {
  padding-top: 16px;
}
.content-title {
  font-weight: 700;
  padding: 0 12px 8px 12px;
}
</style>
<style lang="less">
@import url("../styles/common.less");
</style>
